import React from 'react';
import {Button, Row, Col,Card} from 'antd';
import "./index.less";

import {SelectGroup,Timepicker,TextInput,TimepickerRange} from './fiterItem'

/**
 * props示例：筛选组
 *   const filtersProps = {
    selectItem: {
      fileds: [
           { displayName:"名称",(必填)
            field:"字段",(必填)
            type:"string (输入框)|timepicker(时间控件)|timepickers(时间组控件)|select(下拉框控件)"(必填)
            multiple: true|false //  下拉框单选多选(可选)
            selectorKey: "",//下拉框选择key(可选)
            onchange:function(){}, //回调函数,  type:"select"下拉框时候触发事件
            selectorValue: "", //下拉框选择value(可选)
            defaultValue: "", //默认值 (可选)
            timeFormat:'', //时间格式 YYYY-MM-DD hh:mm:ss  timestamp(时间戳) ,(可选)
           }],
      handle: function (name, value) { // 回调处理
            回调函数处理
      },
    }
  };
 */

class SearchItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ele: props.ele,
      clickFn: props.clickFn,
      childRefs: []
    };
    this.onsearch = this.onsearch.bind(this);
    this.onreset = this.onreset.bind(this);
  }
  componentWillReceiveProps(props,next){
    this.setState({
      ele: props.ele,
      handle: props.handle
    });
  }
  onsearch(){
    let $param={};
    for (var o in this.refs) {
      $param[this.refs[o].state.name]=this.refs[o].state.val;
    };
    this.state.clickFn($param);
  };
  onreset(){
    let $param={};
    for (var o in this.refs) {
      this.refs[o].setState({val:[]});
      $param[this.refs[o].state.name]="";
    };
    this.state.clickFn($param);
  };
  render() {
    const self = this;
    const fileds = self.state.ele.map((item, j)=>{return Object.assign({}, item, self.props.ele[j])});
    return (
      <Card style={{ marginTop: 5 }}>
        <Row gutter={24}>
          <form style={{maxHeight:'450px', overflow: 'auto'}}>
            {fileds.map(function (item, key) {
              switch (item.type){
                case 'select' : {
                  return <SelectGroup ref={'selectGroup'+key} {...item} key={key}/>
                }
                case 'timepicker':{
                  return <Timepicker ref={'dateCompare'+key} {...item} key={key}/>
                }
                case 'timepickers':{
                  return <TimepickerRange ref={'dateCompare'+key} {...item} key={key}/>
                }
                case 'string':{
                  return <TextInput ref={'textInput'+key} {...item} key={key}/>
                }
                default: {
                  return <div>暂无配匹类型</div>
                }
              }
            }.bind(this))}
            <Col style={{marginLeft: '20px'}} span={4}>
              <label className="ff_label"></label>
              <Button className="ff_button" onClick={this.onsearch} type="primary">搜 索</Button>
              <Button className="ff_button" onClick={this.onreset}  type="primary">重 置</Button>
            </Col>
          </form>
        </Row>
      </Card>
    );
  }
}
export default SearchItem
